<template>
  <span
    class="input-field-download-link row no-wrap items-center"
    v-if="Field"
  >
    <span
      :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
          ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
      v-if="Field.Label !== void 0"
    >
      <q-tooltip
        v-if="Field.Description"
        anchor="top right"
      >{{$t(Field.Description)}}</q-tooltip>{{$t(Field.Label) || ''}}
      <span
        v-if="Field.Required"
        class="required-mark"
      >*</span>
    </span>

    <div class="" v-if="Field.Info.Url">
      <q-btn label="下载" flat
        class="bg-primary text-white rounded q-px-sm"
        style="border-radius: 5px;"
        @click="download">
        <q-tooltip v-if="Field.Info.Tooltip">{{ Field.Info.Tooltip }}</q-tooltip>
      </q-btn>
    </div>
    <slot name="warning"></slot>
  </span>
</template>

<script>
import { InputFieldMixin } from 'eis-admin-mixins';

export default {
  name: 'InputFieldDownloadLink',
  mixins: [InputFieldMixin],
  fieldInfo: {
    Category: 'basic',
    Label: '下载链接',
    Value: 'DownloadLink',
    Description: '',
  },
  methods: {
    download() {
      // 下载图片的base64 src为文件
      const a = document.createElement('a');
      a.href = this.Field.Info.Url;
      a.click();
    },
  },
};
</script>

<style lang="scss" scoped>
.input-field-payment-record {
  .payment-record {
    width: 90px;
    height: 90px;
    color: white;
    border-radius: 4px;

    &.paied {
      background-color: green;
    }

    &.unpaied {
      background-color: $grey-3;
      color: unset;
    }

    .year {
      font-size: 1.5rem;
      padding-top: 4px;
    }

    .amount {
      font-size: 12px;
      line-height: 16px;
    }

    .action-btns {
      margin: 1px;
    }

    .voucher {
      margin: 0;
      height: 24px;
      width: 24px;

      :deep(.q-uploader) {
        margin-left: 0;
        background-color: transparent;
      }
      :deep(.input-field-image), :deep(.e-icon), :deep(.file-list-item) {
        background-color: transparent;
        border: 0;
        margin-top: 0;
        height: 24px;
        width: 24px;

        i {
          margin-top: -16px;
          font-size: 24px;
        }
      }
      :deep(.file-list) {
        top: 0;
      }
    }

    .mail-sent {
        opacity: 0.3;
      &.active {
        opacity: 1;
      }
    }
  }
}
</style>
